<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:screenHeight + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">粗纱实时数据详情</view>
		</cu-custom>
		<view class="fixedtwo" :style="{top:CustomBar + 'rpx'}">
			<!-- <text class="texttwo">机器{{name}}</text> -->
			<image style="width: 50%;height: 400rpx;" mode="scaleToFill" src="/static/images/timedataRovingdetail.jpg"></image>
			<view class="" style="background-color: whitesmoke;width: 54%;">
				<view style="padding: 10rpx;">基础信息</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 机器型号:{{LMACHINETYPE}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 运行状态:{{tableList['运行状态']}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 当前班生产米数:{{tableList['当前班生产米数']}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 当前班落纱次数:{{tableList['当前班落纱次数']}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 当前班工作效率:{{tableList['当前班工作效率']}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 当前班工作时间:{{tableList['当前班工作时']}} 时 {{tableList['当前班工作分']}} 分
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 总数产量:{{tableList['总数产量']}}
				</view>
			</view>
		</view>
		<!-- <scroll-dome :list="list" :isShow="false" @jumpArchives="jumpArchives"></scroll-dome> -->
		<navTab ref="navTab" :number="5" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		<swiper :current="currentTab" @change="swiperTab" class="swiper" :style="{top:CustomBar + 500 + 'rpx',height:height + 'px'}">
			<swiper-item v-for="listItem in deliverplan" :key="listItem.id">
				<scroll-view style="height: 100%;" scroll-y scroll-with-animation>
					<!-- 数据列表组件 -->
					<scroll-view style="height: 100%;" scroll-y scroll-with-animation>
						<view v-if="listItem.id == '1'">
							<t-table @change="change">
								<t-tr>
									<t-th></t-th>
									<t-th>理论速度</t-th>
									<t-th>实际速度</t-th>
								</t-tr>
								<t-tr>
									<t-td>锭翼转速</t-td>
									<t-td>{{tableList['锭翼理论速度']}}</t-td>
									<t-td>{{tableList['锭翼实际速度']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>筒管转速</t-td>
									<t-td>{{tableList['筒管理论速度']}}</t-td>
									<t-td>{{tableList['筒管实际速度']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>罗拉转速</t-td>
									<t-td>{{tableList['罗拉理论速度']}}</t-td>
									<t-td>{{tableList['罗拉实际速度']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>升降转速</t-td>
									<t-td>{{tableList['升降理论速度']}}</t-td>
									<t-td>{{tableList['升降实际速度']}}</t-td>
								</t-tr>
							</t-table>
						</view>
						<view v-else-if="listItem.id == '2'">
							<t-table @change="change">
								<t-tr>
									<t-th></t-th>
									<t-th>产量</t-th>
									<t-th>生产时间</t-th>
									<t-th>生产效率</t-th>
									<t-th>落纱次数</t-th>
								</t-tr>
								<t-tr>
									<t-td>当前班</t-td>
									<t-td>{{ tableList['当前班生产米数'] }}</t-td>
									<t-td>{{ tableList['当前班工作时'] }}时{{tableList['当前班工作分']}}</t-td>
									<t-td>{{ tableList['当前班工作效率']}}%</t-td>
									<t-td>{{ tableList['当前班落纱次数'] }}</t-td>
								</t-tr>
								<t-tr>
									<t-td>早班</t-td>
									<t-td>{{tableList['早班生产米数']}}</t-td>
									<t-td>{{tableList['早班工作时']}}时{{tableList['早班工作分']}}</t-td>
									<t-td>{{tableList['早班工作效率']}}%</t-td>
									<t-td>{{tableList['早班落纱次数']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>中班</t-td>
									<t-td>{{tableList['中班生产米数']}}</t-td>
									<t-td>{{tableList['中班工作时']}}时{{tableList['中班工作分']}}</t-td>
									<t-td>{{tableList['中班工作效率']}}%</t-td>
									<t-td>{{tableList['中班落纱次数']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>晚班</t-td>
									<t-td>{{tableList['晚班生产米数']}}</t-td>
									<t-td>{{tableList['晚班工作时']}}时{{tableList['晚班工作分']}}</t-td>
									<t-td>{{tableList['晚班工作效率']}}%</t-td>
									<t-td>{{tableList['晚班落纱次数']}}</t-td>
								</t-tr>
							</t-table>
						</view>
						<view v-else-if="listItem.id == '3'">
							<image src="/static/images/Bobbin.png" mode="scaleToFill" style="width: 100%;"></image>
							<t-table @change="change" :top="20">
								<t-tr>
									<t-td>粗纱捻度(Tw)</t-td>
									<t-td>{{tableList['捻度设定']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>筒管直径(Din)</t-td>
									<t-td>{{tableList['筒管直径']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>筒管长度(L)</t-td>
									<t-td>{{tableList['筒管长度']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>植绒宽度(h)</t-td>
									<t-td>{{tableList['植绒宽度']}}</t-td>
								</t-tr>
							</t-table>
							<t-table @change="change" :top="20">
								<t-tr>
									<t-td>成型角度(θ)</t-td>
									<t-td>{{tableList['成型角度']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>纺纱动程(Ho)</t-td>
									<t-td>{{tableList['纺纱动程']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>每层厚度(δ)</t-td>
									<t-td>{{tableList['每层厚度']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>卷绒密度(Dt)</t-td>
									<t-td>{{tableList['卷绒密度']}}</t-td>
								</t-tr>
							</t-table>
							<t-table @change="change" :top="20">
								<t-tr>
									<t-td>纺纱生头方向</t-td>
									<t-td>{{tableList['纺纱生头方向']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>植绒区捻度</t-td>
									<t-td>{{tableList['植绒区捻度']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>植绒区卷绕密度</t-td>
									<t-td>{{tableList['植绒区卷绕密度']}}</t-td>
								</t-tr>
							</t-table>
						</view>
						<view v-else-if="listItem.id == '4'" style="height: 240px;position: relative;">
							<image src="/static/images/Lifting.png" mode="scaleToFill" :style="{width: 100 + '%'}"></image>
							<view class="Lifting1">{{tableList['生头位置']}}</view>
							<view class="Lifting2">{{tableList['成型位置']}}</view>
							<view class="Lifting3">{{tableList['落纱位置']}}</view>
						</view>
						<view v-else-if="listItem.id == '5'">
							<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
							<t-table @change="change" :top="20">
								<t-tr>
									<t-td>长度百分比(%)</t-td>
									<t-td>速度设定(rpm)</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比1']}}</t-td>
									<t-td>{{tableList['设定十段速1']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比2']}}</t-td>
									<t-td>{{tableList['设定十段速2']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比3']}}</t-td>
									<t-td>{{tableList['设定十段速3']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比4']}}</t-td>
									<t-td>{{tableList['设定十段速4']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比5']}}</t-td>
									<t-td>{{tableList['设定十段速5']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比6']}}</t-td>
									<t-td>{{tableList['设定十段速6']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比7']}}</t-td>
									<t-td>{{tableList['设定十段速7']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比8']}}</t-td>
									<t-td>{{tableList['设定十段速8']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比9']}}</t-td>
									<t-td>{{tableList['设定十段速9']}}</t-td>
								</t-tr>
								<t-tr>
									<t-td>{{tableList['设定百分比10']}}</t-td>
									<t-td>{{tableList['设定十段速10']}}</t-td>
								</t-tr>
							</t-table>
						</view>
						<view class="cu-form-group" v-for="(item,index) in tableList7" :key="index" v-else>
							<view class="grid col-3" style="width: 100%;color:rgb(127, 184, 178)">
								<view> {{item.date}}</view>
								<view> {{item.time}}</view>
								<view> {{item.LALARMTEXT}}</view>
							</view>
							<!-- <view class="title" style="min-width:calc(5em + 126rpx)">{{item.description}}</view>
							<input type="text" disabled :value="item.value" /> -->
						</view>
					</scroll-view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import navTab from '@/colorui/components/navTab.vue'
	import ScrollDome from '@/colorui/components/ScrollDome'
	import tTable from '@/colorui/components/t-table/t-table.vue';
	import tTh from '@/colorui/components/t-table/t-th.vue';
	import tTr from '@/colorui/components/t-table/t-tr.vue';
	import tTd from '@/colorui/components/t-table/t-td.vue';
	import {
		mapGetters
	} from 'vuex'
	import {
		getMinuteInfo
	} from '@/service/selectList'
	import uCharts from '@/colorui/components/u-charts/u-charts.js'
	import utils from '@/static/js/utils.filter.js';
	var canvaColumn = null;
	let Interval = null;
	import {
		ucharts
	} from '@/mixin/mixin.js'
	export default {
		mixins: [ucharts],
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				tableList: {},
				name: '',
				LID: '',
				CustomBar: this.CustomBar,
				screenHeight: this.screenHeight,
				sctiveList: [{
						name: '机器型号:山西经纬 JW9500'
					},
					{
						name: '运行状态:'
					},
					{
						name: '当前班生产米数:'
					},
					{
						name: '当前班落纱次数:'
					},
					{
						name: '当前班工作效率:'
					},
					{
						name: '当前班工作时间:时 分'
					}
				],
				tabTitle: ['实时参数', '产量统计', '筒管设置', '升降参数', '速度设定', '故障信息'], //导航栏格式
				currentTab: 0, //sweiper所在页
				deliverplan: [{
						newsList: [],
						isShow: true,
						id: '1'
					},
					{
						newsList: [],
						isShow: true,
						id: '2'
					},
					{
						newsList: [],
						isShow: true,
						id: '3'
					},
					{
						newsList: [],
						isShow: true,
						id: '4'
					},
					{
						newsList: [],
						isShow: true,
						id: '5'
					},
					{
						newsList: [],
						isShow: true,
						id: '6'
					},
				],
				tableList7: [],
			}
		},
		components: {
			ScrollDome,
			navTab,
			tTable,
			tTh,
			tTr,
			tTd
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox']),
			height() {
				return this.screenHeight - uni.upx2px(this.CustomBar) - uni.upx2px(490)
			}
		},
		onLoad(option) {
			this.name = option.name
			this.LPRCTYPE = option.LPRCTYPE
			this.LMACHINETYPE = option.LMACHINETYPE
			this.LID = option.lid
			// uni.request({
			//     url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/minuteInfo/historyErr', 
			//     data: {
			//         lid: this.LID
			//     },
			//     success: (res) => {
			// 		for(let i = 0; i < res.data.data.length ;i ++) {
			// 			res.data.data[i].date = utils.timeTodate('Y-m-d', res.data.data[i].LSTARTDATE)
			// 			res.data.data[i].time = utils.timeTodate('H:i', res.data.data[i].LSTARTDATE)
			// 		}
			// 		console.log(res.data.data);
			// 		this.tableList7 = res.data.data
			//     }
			// });
			this.connectSocketInit()
			uni.onSocketOpen(function(res) {
				console.log('WebSocket连接已打开！');
			});
			uni.onSocketError(function(res) {
				console.log('WebSocket连接打开失败，请检查！');
			});
		},
		// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
		onUnload() {
			clearInterval(Interval)
			// this.closeSocket();
		},
		beforeDestroy() {
			this.closeSocket();
		},
		methods: {
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: "ws://" + uni.getStorageSync('IP').split("//")[1] + ':8888/' + "/machine",
					// url: "ws://192.168.31.29:8888/machine",
					// url: "ws://" + uni.getStorageSync('IP').split("//")[1] + ':' + uni.getStorageSync('PORT') + "/websocket/socketServer.do",
					success(data) {
						console.log("websocket连接成功");
					},
				})
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				let data = {
					// "procedure": "粗纱"/
					"machine": 'CS'
					// "type": 0
				}
				// let data = {"url": "minuteInfo", "data": {"type": 1, "item": '粗纱', "machineno":this.name}}
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					// setInterval(()=> {
					this.socketTask.send({
						data: JSON.stringify(data),
						async success() {
							console.log("消息发送成功");
						},
					});
					// },1000)
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						// console.log(JSON.parse(res.data))
						let mydata = JSON.parse(res.data)
						for (let value in mydata[this.name]) {
							if (mydata[this.name][value] == undefined) {
								mydata[this.name][value] = ''
							}
						}
						this.tableList = mydata[this.name]
						this.getuCharts()
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},

			changeTab(index) {
				this.currentTab = index
			},
			change(e) {
				console.log(e.detail);
			},
			// swiper 滑动
			swiperTab(e) {
				var index = e.detail.current //获取索引
				console.log(index);
				if (this.tabTitle.length <= 5) {
					this.$refs.navTab.navClick(index)
				} else {
					this.$refs.navTab.longClick(index)
				}
			},
			//监听用户下拉事件
			onPullDownRefresh() {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			getServerData() {

			},
			getuCharts() {
				let Column = {
					categories: ["设定十段速1", "设定十段速2", "设定十段速3", "设定十段速4", "设定十段速5", "设定十段速6", "设定十段速7", "设定十段速8", "设定十段速9", "设定十段速10"],
					series: [{
						"name": "速度设定",
						"data": [this.tableList['设定十段速1'], this.tableList['设定十段速2'], this.tableList['设定十段速3'], this.tableList['设定十段速4'],
							this.tableList['设定十段速5'], this.tableList['设定十段速6'], this.tableList['设定十段速7'], this.tableList['设定十段速8'], this
							.tableList['设定十段速9'], this.tableList['设定十段速10']
						]
					}]
				};
				this.showColumn("canvasColumn", Column);
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'column',
					padding: [15, 5, 0, 15],
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: false,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
						disabled: true
					},
					yAxis: {
						gridType: 'dash',
						data: [{
							min: 100,
							max: 1200,
							position: 'right',
							axisLine: false,
							format: (val) => {
								return val.toFixed(0) + 'rpm'
							},
						}]
					},
					dataLabel: true,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: this.cWidth * this.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
				canvaColumn.touchLegend(e, {
					animation: true
				});
			},
		}
	}
</script>

<style lang="scss">
	.fixedtwo {
		position: fixed;
		display: flex;
		left: 0px;
		width: 100%;

		.texttwo {
			position: absolute;
			z-index: 1;
			font-size: 40rpx;
			color: #007AFF;
			left: 30rpx;
			bottom: 30rpx;
		}
	}

	.swiper {
		position: fixed;
		width: 100%;
		left: 0px;
	}

	.Lifting1,
	.Lifting2,
	.Lifting3 {
		position: absolute;
		color: rgb(127, 184, 178);
		font-size: 25px;
	}

	.Lifting1 {
		bottom: 27px;
		left: 210rpx;
	}

	.Lifting2 {
		bottom: 40px;
		left: 410rpx;
	}

	.Lifting3 {
		bottom: 40px;
		left: 617rpx;
	}
</style>
